<template>
  <ele-page>
    <el-row :gutter="24">
      <el-col :sm="12" :xs="24">
        <ele-card :body-style="{ paddingTop: '8px' }" header="企业专属职位">
          <!-- 表格 -->
          <ele-pro-table
            ref="tableRef"
            row-key="userId"
            :columns="columns"
            :datasource="datasource"
            :show-overflow-tooltip="true"
            v-model:selections="selections"
            highlight-current-row
            cache-key="systemUserTable"
            :tools="false"
          >
            <template #toolbar>
              <el-button
                type="success"
                class="ele-btn-icon"
                :icon="Plus"
                @click="openEdit()"
              >
                新建企业专属职位
              </el-button>
            </template>

            <template #action="{ row }">
              <el-link
                type="success"
                :underline="false"
                @click="openAddJob(row)"
              >
                招人
              </el-link>
              <el-divider direction="vertical" />
              <el-link type="primary" :underline="false" @click="openEdit(row)">
                修改
              </el-link>
              <el-divider direction="vertical" />
              <router-link
                :to="'/company/shifts?id=' + row.id"
                style="text-decoration: none"
              >
                <el-link type="warning" :underline="false"> 班次管理 </el-link>
              </router-link>
            </template>
          </ele-pro-table>
        </ele-card>
      </el-col>
      <el-col :sm="12" :xs="24">
        <ele-card :body-style="{ paddingTop: '8px' }" header="公共职位模板">
          <!-- 表格 -->
          <ele-pro-table
            ref="tableRef2"
            row-key="userId"
            :columns="columns2"
            :datasource="datasource2"
            :show-overflow-tooltip="true"
            v-model:selections="selections"
            highlight-current-row
            cache-key="systemUserTable"
            :tools="false"
          >
            <template #action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="openEdit(row, 1)"
              >
                添加到专属职位
              </el-link>
            </template>
          </ele-pro-table>
        </ele-card>
      </el-col>
    </el-row>

    <!-- 编辑弹窗 -->
    <edit
      v-model="showEdit"
      :data="current"
      :company-id="companyId"
      :c-tp="cTp"
      @done="reload"
    />

    <!-- 发布工作弹窗 -->
    <add-job v-model="showAddJob" :data="current" />
  </ele-page>
</template>

<script setup>
  import { ref, unref, watch } from 'vue';
  import { Plus } from '@element-plus/icons-vue';
  import Edit from './components/edit.vue';
  import AddJob from './components/add-job.vue';
  import { pagePosition } from '@/api/company';
  import { useRouter } from 'vue-router';
  const { currentRoute } = useRouter();
  const ROUTE_PATH = '/company/position';

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格实例 */
  const tableRef2 = ref(null);

  /** 表格列配置 */
  const columns = ref([
    {
      prop: 'id',
      width: 90,
      label: 'ID'
    },
    {
      prop: 'title',
      label: '职位名称',
      width: 220
    },
    {
      columnKey: 'action',
      label: '操作',
      minWidth: 200,
      align: 'left',
      slot: 'action'
    }
  ]);

  /** 表格列配置 */
  const columns2 = ref([
    {
      prop: 'id',
      width: 90,
      label: 'ID'
    },
    {
      prop: 'title',
      label: '职位名称',
      width: 220
    },
    {
      columnKey: 'action',
      label: '操作2',
      minWidth: 200,
      align: 'left',
      slot: 'action'
    }
  ]);

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 企业id */
  const companyId = ref(0);

  /** 公用模板添加到私有模板 */
  const cTp = ref(0);

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 是否显示编辑弹窗 */
  const showAddJob = ref(false);

  const getId = () => {
    const { query } = unref(currentRoute);
    companyId.value = Number(query.id);
  };
  getId();

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pagePosition({
      ...where,
      ...orders,
      page,
      limit,
      company_id: companyId.value
    });
  };

  /** 表格数据源 */
  const datasource2 = ({ page, limit, where, orders }) => {
    return pagePosition({
      ...where,
      ...orders,
      page,
      limit,
      company_id: 0
    });
  };

  /** 搜索 */
  const reload = (where) => {
    const { query } = unref(currentRoute);
    companyId.value = Number(query.id);
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row, common_to_private = 0) => {
    cTp.value = common_to_private;
    if (common_to_private) row.company_id = companyId.value;
    current.value = row ?? null;
    showEdit.value = true;
  };

  /** 打开编辑弹窗 */
  const openAddJob = (row) => {
    current.value = row ?? null;
    showAddJob.value = true;
  };

  watch(
    currentRoute,
    (route) => {
      if (unref(route).path !== ROUTE_PATH) {
        return;
      }
      reload();
    },
    { immediate: true }
  );
</script>

<script>
  export default {
    name: 'SystemUser'
  };
</script>
